<template>
	<div class="system-menu-container">
		<el-form :inline="true" ref="dataFormRef"  :model="param.dataForm" @keyup.enter.native="getDataList()">
			<el-row >
				<el-col :span="8">
					<el-form-item label="页面类型" prop="pageType">
						<DicSelect v-model="param.dataForm.pageType" placeholder="请选择" dicCode="YMLX" style="width:100%"></DicSelect>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="消息编码" prop="msgCode">
						<el-input v-model="param.dataForm.msgCode" placeholder="消息编码" clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-button type="primary" icon="ele-Search" @click="getDataList()">查询</el-button>
					<el-button type="primary" icon="ele-Refresh" @click="reSetForm(dataFormRef)">重置</el-button>
				</el-col>
			</el-row>
		</el-form>
		<div class="btnStyle">
            <div>
				<el-button  type="success" icon="ele-Plus" @click="addHandle()">新增</el-button>
				<el-button  type="primary" icon="ele-Edit" @click="updateHandle()" :disabled="dataListSelections.length !== 1">修改</el-button>
				<el-button  type="danger" icon="ele-Delete" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">删除</el-button>
            </div>
        </div>
		<el-table :data="dataList" @selection-change="selectionChangeHandle" style="width: 100%" v-loading="dataListLoading">
			<el-table-column prop="id" type="selection" width="50"></el-table-column>
			<el-table-column prop="msgCode" label="消息编码"></el-table-column>
			<el-table-column prop="msgDescription" label="消息描述"></el-table-column>
			<el-table-column prop="msgContext" label="消息内容"></el-table-column>
			<el-table-column prop="msgContextParam" label="消息内容参数"></el-table-column>
			<el-table-column prop="pageUrl" label="页面路径"></el-table-column>
			<el-table-column prop="pageParam" label="页面参数"></el-table-column>
			<el-table-column prop="pageType" :formatter="formatType" label="页面类型" width="100"></el-table-column>
		</el-table>
		<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 50, 200]"
				v-model:current-page="param.page"
				background
				v-model:page-size="param.limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			>
			</el-pagination>
		<el-dialog :close-on-click-modal="false" :title="!dataForm.id ? '新增' : '修改'" ref="addOrUpdate" v-model="addOrUpdateVisible">
			<el-form :model="dataForm" :rules="dataRule" ref="ruleFormRef" @keyup.enter.native="dataFormSubmit(ruleFormRef)" label-width="120px">
				<el-form-item label="消息编码" prop="msgCode">
					<el-input v-model="dataForm.msgCode" placeholder="消息编码"></el-input>
				</el-form-item>
				<el-form-item label="消息描述" prop="msgDescription">
					<el-input v-model="dataForm.msgDescription" placeholder="消息描述"></el-input>
				</el-form-item>
				<el-form-item label="消息内容" prop="msgContext">
					<el-input v-model="dataForm.msgContext" placeholder="消息内容"></el-input>
				</el-form-item>
				<el-form-item label="消息内容参数" prop="msgContextParam">
					<el-input v-model="dataForm.msgContextParam" placeholder="消息内容参数，多个用逗号分隔，如:id,name"></el-input>
				</el-form-item>
				<el-form-item label="页面路径" prop="pageUrl">
					<el-input v-model="dataForm.pageUrl" placeholder="为资源管理中的菜单路由，如:vocation/check" ></el-input>
				</el-form-item>
				<el-form-item label="页面参数" prop="pageParam">
					<el-input v-model="dataForm.pageParam" placeholder="页面参数，多个用逗号分隔，如:id,name"></el-input>
				</el-form-item>
				<el-form-item label="页面类型" prop="pageType">
					<DicSelect v-model="dataForm.pageType" placeholder="请选择" dicCode="YMLX" style="width:100%"></DicSelect>
				</el-form-item>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="addOrUpdateVisible = false">取消</el-button>
					<el-button type="primary" @click="dataFormSubmit(ruleFormRef)">确定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { ref, toRefs, reactive, onMounted, nextTick, defineComponent } from 'vue'
import type { FormInstance } from 'element-plus'
import {systemApi} from '/@/api/systemapi'
import { getCodeList } from '/@/utils/cacheDict'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'

export default defineComponent({
	name: 'systemTenant',
	setup() {
		const dataFormRef = ref<FormInstance>()
		const ruleFormRef = ref<FormInstance>();
		const state = reactive({
			dataList: [],
			total: 0,
			loading: false,
			dataListLoading: false,
			dataListSelections: [],
			dataDictionaryList: {},
			addOrUpdateVisible: false,
			param: {
				page: 1,
				limit: 10,
				dataForm: {
					msgCode: '',
					pageType: ''
				}
			},
			dataForm: {
				id: '',
				msgCode: '',
				msgDescription: '',
				msgContext: '',
				msgContextParam: '',
				pageUrl: '',
				pageParam: '',
				pageType: ''
			},
			dataRule: {
				msgCode: [
					{ required: true, message: '消息编码不能为空', trigger: 'blur' }
				]
				
			}
		})
		const getDataList = () => {
			state.dataListLoading = true
			nextTick(() => {
				systemApi().queryMsgDefList(state.param).then((data) => {
					if (data && data.code === 0) {
						state.dataList = data.page.list
						state.total = data.page.totalCount
					} else {
						state.dataList = []
						state.total = 0
					}
				}).finally(() => {
					state.dataListLoading = false
				})
			})
		}
		const reSetForm = (formEl: FormInstance | undefined) => {
			if (!formEl) return
			formEl.resetFields()
			state.param.page = 1
			getDataList()
		}

		const selectionChangeHandle = (val: any) => {
			state.dataListSelections = val
		}
		// 分页改变
		const onHandleSizeChange = (val: number) => {
			state.param.limit = val;
			getDataList()
		}
		// 分页改变
		const onHandleCurrentChange = (val: number) => {
			state.param.page = val;
			getDataList()
		}
		const formatType = (row:any, column:any, cellValue:any, index:number) => {
			if (cellValue) {
				return state.dataDictionaryList['YMLX'][cellValue]
			}
		}
		// 页面加载时
		onMounted(() => {
			// 数据字典
			getCodeList(state, ['YMLX'])
			getDataList()
		})
		const addHandle = () => {
			state.dataForm = {
				id: '',
				msgCode: '',
				msgDescription: '',
				msgContext: '',
				msgContextParam: '',
				pageUrl: '',
				pageParam: '',
				pageType: ''
			}
			state.addOrUpdateVisible = true
		}
		const updateHandle = () => {
			state.dataForm = {
				id: state.dataListSelections[0].id,
				msgCode: state.dataListSelections[0].msgCode,
				msgDescription: state.dataListSelections[0].msgDescription,
				msgContext: state.dataListSelections[0].msgContext,
				msgContextParam: state.dataListSelections[0].msgContextParam,
				pageUrl: state.dataListSelections[0].pageUrl,
				pageParam: state.dataListSelections[0].pageParam,
				pageType: state.dataListSelections[0].pageType
			}
			state.addOrUpdateVisible = true
		}
		const deleteHandle = (id: any) => {
			ElMessageBox.confirm('是否确定删除所选记录', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
			}).then(() => {
				var ids = id ? [id] : state.dataListSelections.map(item => {
					return item.id
				})
				const loading = ElLoading.service({
					lock: true,
					text: '处理中',
					background: 'rgba(0, 0, 0, 0.7)',
				})
				systemApi().msgDefDeleteById(ids).then(data => {
					if (data && data.code === 0) {
						ElMessage.success('删除成功！')
						getDataList()
					} else {
						ElMessage.error(data.msg)
					}
				}).catch(() => {
					ElMessage.error('删除失败！')
				}).finally(() => {
					loading.close()
				})
			})
		}
		const dataFormSubmit = (formEl: FormInstance | undefined) => {
			if (!formEl) return
			formEl.validate((valid: boolean) => {
				if (valid) {
					// 提交数据
					const loading = ElLoading.service({
						lock: true,
						text: '处理中',
						background: 'rgba(0, 0, 0, 0.7)',
					})
					if(!state.dataForm.id) {
						systemApi().saveMsgDef(state.dataForm).then(data => {
							if (data && data.code === 0) {
								ElMessage.success('保存成功')
								state.addOrUpdateVisible = false
								getDataList()
							} else {
								ElMessage.error(data.msg)
							}
						}).catch(() => {
							ElMessage.error('保存失败')
						}).finally(() => {
							loading.close()
						})
					}else{
						systemApi().updateMsgDef(state.dataForm).then(data => {
							if (data && data.code === 0) {
								ElMessage.success('保存成功')
								state.addOrUpdateVisible = false
								getDataList()
							} else {
								ElMessage.error(data.msg)
							}
						}).catch(() => {
							ElMessage.error('保存失败')
						}).finally(() => {
							loading.close()
						})
					}
				}
			})
		}
		return {
			dataFormRef,
			ruleFormRef,
			getDataList,
			reSetForm,
			selectionChangeHandle,
			onHandleSizeChange,
			onHandleCurrentChange,
			formatType,
			addHandle,
			updateHandle,
			dataFormSubmit,
			deleteHandle,
			...toRefs(state),
		}
	}
})
</script>

<style scoped>

</style>